<template>
  <span v-if="['doctor', 'nurse'].includes(role)">
    <vab-icon
      icon="exchange-line"
      style="font-size: 20px"
      title="切换就诊号"
      @click="openDialog"
    />
    <el-dialog append-to-body :visible.sync="dialogVisible" width="40%">
      <div class="d-flex" style="padding: 20px">
        <el-input
          v-model.trim="queryForm.VisitNumber"
          clearable
          placeholder="请输入患者就诊号"
          style="border: none"
        />
        <el-button type="primary" @click="changeVisitNumber">确定</el-button>
      </div>
    </el-dialog>
  </span>
</template>

<script>
  export default {
    name: 'VabSwitchVisitNumber',
    data() {
      return {
        dialogVisible: false,
        queryForm: {
          VisitNumber: '',
        },
        restaurants: [],
        state: '',
        timeout: null,
        role: '',
      }
    },
    watch: {
      $route: {
        handler(route) {
          const pathArr = route.path.split('/')
          this.role = pathArr[1]
        },
        immediate: true,
      },
    },
    methods: {
      openDialog() {
        this.queryForm.VisitNumber = ''
        this.dialogVisible = true
      },
      changeVisitNumber() {
        this.$store.commit(
          'routerParam/setVisitNumber',
          this.queryForm.VisitNumber
        )

        this.$baseMessage('切换成功', 'success', 'vab-hey-message-success')
        let query = this.$route.query
        if (query.VisitNumber) {
          query = {
            ...query,
            ...{ VisitNumber: this.queryForm.VisitNumber },
          }
        }

        this.$router.push({
          path: this.$route.path,
          query,
        })
        this.dialogVisible = false
        setTimeout(() => {
          this.$baseEventBus.$emit('reload-router-view')
        }, 300)
      },
    },
  }
</script>

<style lang="scss" scoped>
  :deep() {
    .el-dialog {
      .el-dialog__header {
        display: none;
        border: 0 !important;
      }

      .el-dialog__body {
        padding: 0;
        border: 0 !important;
        .el-input__inner {
          width: 100%;
          border: 0 !important;
        }
      }
    }
  }
</style>
